<template>
  <div
    class="data-analyse-container scroll-box"
    ref="dataAnalyse"
  >
    <div class="device-model-info">
      <div class="device-name-set">
        <p>{{ deviceCondition.deviceName }}</p>
        <van-button @click="showSet = true">选择设备</van-button>
      </div>
      <div class="model-name-num">
        <span>物模型：{{ deviceCondition.deviceModelName }}</span>
        <span>编号：{{ deviceCondition.deviceNumber }}</span>
      </div>
    </div>

    <van-tabs v-model="activeTab">
      <van-tab
        title="对比分析"
        v-if="showTab"
      >
        <ComparedAnalyse :device-condition="deviceCondition" />
      </van-tab>
      <van-tab
        title="增量分析"
        v-if="showTab"
      >
        <IncrementAnalyse :device-condition="deviceCondition" />
      </van-tab>
      <!-- <van-tab title="比例分析">
        <ProportionAnalyse :device-condition="deviceCondition" />
      </van-tab> -->
    </van-tabs>

    <ConditionSet
      v-if="showSet"
      @submit="submitConditionSet"
      @cancel="cancelConditionSet"
    />
  </div>
</template>

<script>
import { Button, Tab, Tabs } from 'vant';
import ComparedAnalyse from './component/ComparedAnalyse.vue';
import IncrementAnalyse from './component/IncrementAnalyse.vue';
import ProportionAnalyse from './component/ProportionAnalyse.vue';
import ConditionSet from './component/ConditionSet.vue';

export default {
  name: 'DataAnalyse',
  components: {
    [Button.name]: Button,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    ComparedAnalyse,
    IncrementAnalyse,
    // ProportionAnalyse,
    ConditionSet
  },
  provide() {
    return {
      parent: this
    };
  },
  data() {
    return {
      showSet: false,
      activeTab: 0,
      deviceCondition: {},
      socket: '',
      showTab: true
    };
  },
  created() {
    let condition = localStorage.getItem('dataAnalyseCondition');
    if (condition) {
      this.deviceCondition = JSON.parse(condition);
      this.websocketFn();
    } else {
      this.showSet = true;
    }
  },
  methods: {
    // 关闭条件设置
    cancelConditionSet() {
      console.log(this.deviceCondition);
      if (this.deviceCondition.deviceModelId) {
        this.showSet = false;
      } else {
        this.$router.back();
      }
    },
    // 提交条件设置
    submitConditionSet(data) {
      console.log('data---', data);
      this.deviceCondition = data;
      this.showSet = false;
      this.showTab = false;
      setTimeout(() => {
        this.showTab = true;
      }, 100);
      if (this.socket) {
        this.socket.close();
        this.socket = null;
      }
      this.websocketFn();
    },
    websocketFn() {
      // const WS_URL = `ws://${process.env.VUE_APP_WEBSOCKET_URL}/base/iot_websocket/ws/`;
      let token = localStorage.getItem('token');
      // let ws = new WebSocket('ws://s2.v3.hignton.com:9080/base/iot_websocket/ws/', [token]);
      this.socket = new WebSocket(`ws://${location.host}/base/iot_websocket/ws/`, [token]);
      // let ws = new WebSocket(WS_URL, [token]);

      // ws.onopen = function (evt) {
      //   console.log('Connection open ...');
      //   ws.send('Hello WebSockets!');
      // };
      this.socket.onopen = res => {
        // const param = {
        //   device_id: this.deviceCondition.deviceValue,
        //   product_id: this.deviceCondition.deviceModelId,
        //   type: 2,
        //   is_single: true //是否单独监听此设备， 若为true 则客户端只会监听此设备
        // };
        // this.socket.send(JSON.stringify(param));
      };
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
      this.socket = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.data-analyse-container {
  position: relative;
  width: 100%;
  height: 100%;

  .device-model-info {
    width: 100%;
    margin-bottom: 0.213333rem;
    padding: 0.32rem 0.426667rem;
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);

    .device-name-set {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 0.213333rem;

      p {
        font-size: 0.4rem;
      }

      .van-button {
        width: 2.293333rem;
        height: 0.853333rem;
        padding: 0;
        color: #fff;
        border-radius: 0.08rem;
        border-color: var(--color-primary);
        background-color: var(--color-primary);
      }
    }

    .model-name-num {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--color-deep-gray);
      font-size: 0.346667rem;
    }
  }

  ::v-deep .van-tabs {
    .van-tabs__wrap {
      border-bottom: 1px solid var(--border-color);
    }
  }
}
</style>